<template>
	<view class="product">
		<nav-bar background="#FFFFFF">
			<template slot="title">
				<view class="head-title">
					<image src="/static/logo.png" mode="widthFix"></image>
				</view>
			</template>
		</nav-bar>
		<view class="product-content">
			<scroll-view scroll-y class="scroll" @scrolltolower="handleLoadClassify">
				<view class="tabs">
					<view class="tab-item text-overflow-hidden-1" :class="{'active-tab': tab.value === listParams.classify_gid}" v-for="(tab, index) in tabs" :key="tab.value" @click="changeTab(tab)">
						{{ tab.label }}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="scroll-lists">
				<view v-if="lists.length" class="lists">
					<view class="list-item" v-for="(item, index) in lists" :key="item.gid" @click="goDetail(item)">
						<view class="item-img">
							<image :src="item.thumb" mode="widthFix"></image>
						</view>
						<view class="flex flex-column justify-between">
							<view class="">
								<view class="title">{{item.title}}</view>
								<view v-if="item.desc" class="explain text-overflow-hidden-1">{{item.desc}}</view>
							</view>
							<view class="flex align-center justify-between flex-1 padding-t12">
								<view v-if="item.day_rent" class="price">
									<text class="price-symbol">¥</text>
									<text class="price-num">{{item.day_rent | formatPrice($formatPrice, '')}}</text>
									<text class="price-unit" style="color: black;padding-left: 4rpx;">元</text>
									<!-- <text class="price-unit" style="color: black;padding-left: 4rpx;">起</text>
									<text class="price-unit">/天租价</text> -->
								</view>
								<!-- <view v-if="index === 0" class="item-tag new-tag">新品</view>
								<view v-if="index === 5" class="item-tag hot-tag">热租</view> -->
							</view>
						</view>
					</view>
				</view>
				<view v-if="!loading && lists.length === 0" class="empty">暂无数据</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import formatPrice from '@/mixins/formatPrice.js';
	
	export default {
		mixins:[formatPrice],
		data() { 
			return {
				title: '贝贝无人机',
				tabs: [],
				activeTab: 1,
				classifyParams: {
					limit: 10, //页数 必需 示例值: 10
					page: 1, //页码 必需 示例值: 1
					belong_module: '', //模块类型 必需 示例值: product_classify
					belong_id: '', //模块id 可选
					pid: '', //可选 父级ID，传0值显示顶级数据
				},
				loadClassify: true, // 是否加载更多分类
				
				lists: [], // 列表数据
				listParams: {
					limit: 10, // 页数 必需 示例值: 10
					page: 1, // 页码 必需 示例值: 1
					classify_gid: '', // 分类 可选
					brand_gid: '', // 品牌 可选
					key: '', // 可选 搜索：名称/标题/条形码
				},
				loadList: true, // 是否加载更多列表
				loading: true
			};
		},
		onShow() {
			this.getClassifyList()
			this.getRentList()
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			// 加载更多分类
			handleLoadClassify() {
				if (this.loadClassify) {
					this.classifyParams.page ++
					this.getClassifyList()
				}
			},
			// 获取分类
			getClassifyList() {
				this.$api.classifyListApi(this.classifyParams).then(res=> {
					if (this.classifyParams.page === 1) {
						this.tabs = [
							{
								label: '全部',
								value: ''
							}
						]
					}
					
					if (res.data.length === 0 || res.data.length < this.classifyParams.limit) {
						this.loadClassify = false
					} else {
						this.loadClassify = true
					}
					const oldList = [...this.tabs]
					// 处理数据
					const list = res.data.map(item=> {
						return {
							...item,
							label: item.title,
							value: item.gid
						}
					})
					oldList.push(...list)
					this.tabs = oldList
				}).catch(err=> {
					console.log('err', err);
				})
			},
			changeTab(tab) {
				this.listParams.classify_gid = tab.value;
				this.listParams.page = 1
				this.getRentList()
			},
			getRentList() {
				this.loading = true
				this.$api.productRentListApi(this.listParams).then(res=> {
					if (this.listParams.page === 1) {
						this.lists = []
					}
					if (res.data.length === 0 || res.data.length < this.listParams.limit) {
						this.loadList = false
					} else {
						this.loadList = true
					}
					const oldList = [...this.lists]
					oldList.push(...res.data)
					this.lists = oldList
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			},
			// 前往商品详情
			goDetail(item) {
				console.log('item', item);
				uni.navigateTo({
					url: `/pages/product/detail/detail?gid=${item.gid}`
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.product {
		flex: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		
		.head-title {
			position: relative;
			font-family: Alimama ShuHeiTi;
			font-size: 18px;
			font-weight: 700;
			line-height: 21.6px;
			text-align: left;
			color: #000000;
			
			image {
				width: 132rpx;
				height: 32rpx;
				// position: absolute;
				// top: 0;
				// right: 0;
				// width: 50rpx;
				// transform: translateX(90%) translateY(-50%);
			}
		}
		
		.product-content {
			display: flex;
			flex: 1;
			height: 100%;
			overflow: hidden;
		}
		
		.scroll {
			width: 220rpx;
			height: 100%;
			box-sizing: border-box;
			background-color: #FAFAFA;
		}
		
		.tabs {
			box-sizing: border-box;
			padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			
			.tab-item {
				padding: 32rpx 26rpx;
				box-sizing: border-box;
				position: relative;
				
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: left;

				&:after {
					content: '';
					position: absolute;
					left: 10%;
					bottom: 0;
					width: 78%;
					height: 1px;
					background-color: #F1F1F1;
				}
			}
			
			.active-tab {
				font-weight: 700;
				background-color: #FFFFFF;
				
				&:after {
				// 	content: '';
				// 	position: absolute;
				// 	left: 10%;
				// 	bottom: 0;
				// 	width: 80%;
				// 	height: 1px;
					background-color: #FFFFFF;
				}
			}
		}
	
		
		.scroll-lists {
			flex: 1;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
		
		.lists {
			box-sizing: border-box;
			padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			
			.list-item {
				position: relative;
				display: flex;
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				
				&:after {
					content: '';
					position: absolute;
					left: 32rpx;
					bottom: 0;
					width: calc(100% - 64rpx);
					height: 1px;
					background-color: #F1F1F1;
				}
				
				.item-img {
					width: 164rpx;
					height: 164rpx;
					display: flex;
					flex-shrink: 0;
					margin-right: 38rpx;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 164rpx;
					}
				}
				
				.title {
					font-size: 34rpx;
					font-weight: 400;
					line-height: 46rpx;
					text-align: left;
				}
				
				.explain {
					max-width: 282rpx;
					color: #999999;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 28rpx;
					text-align: left;
					padding-top: 8rpx;
				}
				
				.price {
					display: flex;
					align-items: flex-end;
				}
				
				.price-symbol {
					font-size: 22rpx;
					font-weight: 600;
					line-height: 32rpx;
					text-align: left;
				}
				
				.price-num {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 32rpx;
					text-align: left;
				}
				
				.price-unit {
					font-size: 14rpx;
					font-weight: 600;
					line-height: 24rpx;
					text-align: left;
					color: rgba(0, 0, 0, 0.5);
				}
				
				.item-tag {
					color: #FFFFFF;
					font-size: 18rpx;
					font-weight: 400;
					line-height: 24rpx;
					padding: 4rpx 20rpx;
					border-radius: 999px;
				}
				
				.new-tag {
					background-color: #FF0000;
				}
				
				.hot-tag {
					background-color: #FF6B00;
				}
				
			}
		}
	}
</style>
